<template>
	<view class="conter">
		<!-- 详情图片 -->
		<view class="Details_picture">
			<image :src="imgUrl + collectionDetails.drawVideo" mode=""></image>
		</view>
		<!-- 详情图片 -->
		<!--  加密鸭  -->
		<view class="encrypted_duck">
			<view class="duck_name">加密鸭</view>
			<view class="duckd_number">
				<view style="display: flex">
					<view class="">限量：</view>
					<view style="color: #ffffff">1份</view>
				</view>

				<view style="display: flex; margin-left: 55.81rpx">
					<view class="">剩余：</view>
					<view style="color: #ffffff">1份</view>
				</view>
			</view>
		</view>
		<!--  加密鸭  -->
		<!-- 分类 -->
		<!-- <view class="minutes">
			<view class="">所属分类</view>
		</view> -->
		<!-- 分类 -->
		<!-- 关于 -->
		<view class="minutes">关于</view>
		<view class="about_duck">
			<view class="">
				<image :src="imgUrl + '/static/images/about.png'" mode=""></image>
			</view>
		</view>
		<!-- 关于 -->
		<!-- 底部购买 -->
		<view class="snapped_up">
			<view class="price">￥{{ collectionDetails.price }}</view>
			<view @click="purchase" class="goprice" v-if="countdownFinished">立即抢购</view>

			<view class="goprice" v-if="!countdownFinished">
				<u-count-down @finish="handleCountdownFinish" :time="presellTime" format="HH:mm:ss"></u-count-down>
			</view>
		</view>
		<!-- 底部购买 -->
	</view>
</template>

<script>
import { getCollectionDetail, collectionOrder } from '@/api/starting/index.js';
import config from '@/config';
export default {
	data() {
		return {
			collectionId: '',
			countdownFinished: false,
			presellTime: '',
			imgUrl: config.imgUrl,
			RETURN_URL: config.RETURN_URL,
			collectionDetails: {} //藏品详情
		};
	},
	onLoad(option) {
		this.collectionId = option.id;
	},
	created() {
		this.getCollectionDetail();
	},
	methods: {
		handleCountdownFinish() {
			this.countdownFinished = true;
		},
		// 藏品详情
		async getCollectionDetail() {
			let param = {};
			param.id = this.collectionId;
			const data = await getCollectionDetail(param);
			const startDate = new Date();
			const endDate = new Date(data.data.presellTime);
			const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
			this.presellTime = Math.floor(timeDiff);
			this.collectionDetails = data.data;
		},
		async purchase() {
			let param = {};
			param.payType = 7;
			param.quantity = 1;
			param.returnUrl = this.RETURN_URL + '/myOrder';
			param.customerInfoId = 2;
			//子对象集合
			let obj = {};
			obj.cover = this.collectionDetails.name;
			obj.subject = this.collectionDetails.subject;
			obj.number = this.collectionDetails.number;
			obj.creator = this.collectionDetails.creator;
			obj.collectionId = this.collectionDetails.id;
			param.goodsList = [obj];
			const data = await collectionOrder(JSON.stringify(param));
			if (data.code == 200) {
				this.$modal.showToast('抢购成功');
				uni.navigateTo({
					url: `/pages/HomeOrder/chart?id=${this.collectionId}&petId=${data.data.id}&price=${this.collectionDetails.price}`
				});
			} else {
				this.$modal.showToast(data.msg);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	line-height: 76rpx;
	color: red;
}
// 整体
.conter {
	width: 100%;
	height: 100%;
	padding: 20rpx 0;
	// 详情图片
	.Details_picture {
		width: 680rpx;
		height: 680rpx;
		image {
			width: 680rpx;
			height: 680rpx;
			border-radius: 14rpx;
			background-size: cover;
			margin: 0 34.88rpx;
		}
	}

	// 详情图片
	// 加密鸭
	.encrypted_duck {
		width: 680rpx;
		height: 134rpx;
		background: #130f26;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx;
		margin: 34.88rpx 34.88rpx;
		padding: 25rpx 34.88rpx;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 500;

		.duck_name {
			color: #ffffff;
		}

		.duckd_number {
			display: flex;
			color: #787f8e;
			margin-top: 12.21rpx;
		}
	}

	// 加密鸭
	// 分类
	.minutes {
		width: 680rpx;
		color: #ffffff;
		font-weight: 800;
		font-size: 38rpx;
		font-family: 'font';
		margin: 34.88rpx 34.88rpx;
	}

	// 分类
	// 关于
	.about_duck {
		width: 680rpx;
		margin: 0 34.88rpx;
		margin-bottom: 180rpx;
		image {
			width: 680rpx;
			height: 4000rpx;
			border-radius: 14rpx;
		}
	}

	// 关于
	// 抢购
	.snapped_up {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 155rpx;
		bottom: 0;
		position: fixed;
		background: #130f26;
		padding: 26.46rpx 34.88rpx;
		.price {
			font-size: 52rpx;
			font-family: 'font';
			font-weight: 700;
			color: #ffffff;
		}
		.goprice {
			width: 269rpx;
			height: 75rpx;
			background: #46a6f8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 700;
			color: #ffffff;
		}
	}
	// 抢购
}

// 整体
</style>
